<template>
  <div>
    <div>
      <mt-popup
        v-model="popupVisible"
        style="width: 100%;"
        position="bottom">
        <date-range class="calendar"
                    :sync-range="range"
                    lang="zh"
                    @change="onChange"
                    :days-disabled-start="daysDisabledAfter"></date-range>
      </mt-popup>
    </div>
    <section class="month">
      <div class="month-main">
        <div>{{rangeText}}</div>
        <div class="month-main__earning">
          <span>销售额: </span>
          <countTo :endVal="sale" :decimals="2" :duration="2000"></countTo>
          <span>  收益: </span>
          <countTo :endVal="income" :decimals="2" :duration="2000"></countTo>
        </div>
      </div>
      <div class="month-select">
        <span @click="popupVisible = !popupVisible" class="month-select-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024">
            <path fill="#292929" d="M769.927 546.147c0 16.019-12.987 29.007-29.008 29.007H285.114c-16.021 0-29.008-12.987-29.008-29.007v-24.011c0-16.021 12.987-29.008 29.008-29.008h455.805c16.02 0 29.008 12.987 29.008 29.008v24.011zM691.447 321.23c-16.02 0-29.006-11.658-29.006-26.039v-141.84c0-14.38 12.986-26.037 29.006-26.037h24.011c16.02 0 29.008 11.656 29.008 26.037v141.84c0 14.38-12.987 26.038-29.008 26.038h-24.01zM306.223 321.23c-16.02 0-29.007-11.658-29.007-26.039v-141.84c0-14.38 12.986-26.037 29.007-26.037h24.01c16.02 0 29.008 11.656 29.008 26.037v141.84c0 14.38-12.986 26.038-29.007 26.038h-24.011zM769.927 736.51c0 16.018-12.987 29.006-29.008 29.006H285.114c-16.02 0-29.008-12.987-29.008-29.007V712.5c0-16.02 12.987-29.008 29.008-29.008H740.92c16.02 0 29.008 12.987 29.008 29.007v24.011z"/>
            <path fill="#292929" d="M913.794 188.14H766.907v91.866H867.41v585.762H156.184v-581.89h98.907v-91.866H110.249c-25.368 0-45.933 20.565-45.933 45.934 0 .104.007.207.008.311-.001.104-.008.207-.008.311v673.135c0 2.378.181 4.714.529 6.995 3.369 22.049 22.414 38.938 45.404 38.938h803.096c12.685 0 24.167-5.14 32.48-13.452s13.453-19.796 13.453-32.48V240.443c.289-2.082.449-4.207.449-6.369.001-25.369-20.563-45.934-45.932-45.934z"/>
            <path fill="#292929" d="M385 192.634h255.617v91.244H385v-91.244z"/>
          </svg>
        </span>
      </div>
    </section>
    <div
      v-infinite-scroll="queryPersonalOrders"
      infinite-scroll-disabled="canLoad"
      infinite-scroll-distance="10"
    >
      <order-card v-for="(order, index) in orderList" :key="'personal' + index" :order="order"></order-card>
    </div>
  </div>
</template>

<script>
import {DateRange} from 'vue-date-range'
import moment from 'moment'
import countTo from 'vue-count-to'
import { mapState, mapActions } from 'vuex'
import OrderCard from '@/components/OrderCard'
export default {
  name: 'PersonalList',
  components: {
    OrderCard,
    DateRange,
    countTo
  },
  data () {
    return {
      popupVisible: false,
      daysDisabledAfter: moment().add(1, 'days')
    }
  },
  computed: {
    ...mapState({
      loading: state => state.personal.loading, // 加载中
      loadend: state => state.personal.loadend, // 是否全部加载完
      orderList: state => state.personal.orderList, // 个人订单
      startDate: state => state.personal.startDate, // 开始时间
      endDate: state => state.personal.endDate, // 结束时间
      sale: state => state.personal.sale, // 销售额
      income: state => state.personal.income // 收益
    }),
    // 传给时间选择器的range
    range () {
      return {
        startDate: this.startDate,
        endDate: this.endDate
      }
    },
    // 时间范围显示
    rangeText () {
      // 判断是否为本月
      const endIsToday = this.endDate.isSame(moment(), 'days') // 结束日是否为本日
      const startIsMonthStart = this.startDate.isSame(moment().startOf('month')) // 开始是否为本月开始
      if (endIsToday && startIsMonthStart) {
        return '本月'
      }
      return `${this.startDate.format('MM-DD')} 至 ${this.endDate.format('MM-DD')}`
    },
    // 如果正在加载中 则不加载， 如果已经全部加载完 也不再加载
    canLoad () {
      return this.loadend || this.loading
    }
  },
  methods: {
    ...mapActions({
      queryPersonalOrders: 'personal/QueryPersonalOrders',
      ReQueryPersonalOrders: 'personal/ReQueryPersonalOrders',
      setDateRange: 'personal/SetDateRange'
    }),
    onChange (range) {
      this.popupVisible = false
      this.setDateRange(range)
      this.ReQueryPersonalOrders()
    }
  }
}
</script>

<style scoped lang="stylus">
  .month
    display flex
    padding 18px 30px
    background #f3f2f9
    &-main
      flex 1
    &-main__earning
      font-size 22px
      color #999
  .month-select
    display flex
    align-items center
  .month-select-icon
    width 38px
    svg
      max-width 100%
      height auto

</style>
